<template>
  <div>
    <div v-for="item in tableData" class="mvDiv" v-loading="loading">
      <img :src="item.picUrl" alt="" class="pic" @click="toMVPlayPage(item)" />
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { storeToRefs } from "pinia";
import { storage } from "@/stores/storage";
import { getSingerMV } from "@/service/songs.js";
import router from "../../router";
export default defineComponent({
  setup() {
    let store = storage();
    const { singerId } = storeToRefs(store);
    const loading = ref(true);
    let tableData = ref([]);
    function toMVPlayPage(item) {
      store.setMVId(item.id);
      router.push({
        path: "/mvplay",
      });
    }
    if (singerId.value)
      getSingerMV(singerId.value)
        .then((res) => {
          let data = res.data.mvs;
          for (let i = 0; i < data.length; i++) {
            tableData.value[i] = {};
            tableData.value[i].name = data[i].name;
            tableData.value[i].id = data[i].id;
            tableData.value[i].picUrl = data[i].imgurl16v9;
          }
          loading.value = false;
        })
        .catch((err) => {
          if (err) ElMessage("网络错误,请重新尝试");
        });
    return {
      tableData,
      toMVPlayPage,
      loading,
    };
  },
});
</script>

<style scoped>
.pic {
  border-radius: 7px;
  width: 200px;
  cursor: pointer;
  transition: 1s;
}
.pic:hover {
  transform: scale(0.9);
}
.mvDiv {
  float: left;
  width: 200px;
  height: 160px;
  margin: 25px;
}
</style>
